<template>
  <div class="my-main">
    <!-- 头部 -->
    <div class="my-nav">
     
       <div class="top"> <span
          ><img :src="user.headerimg" alt=""
        /></span>
        <span>{{user.username}}</span>
        <span @click="onsetup" style="float:right">设置</span> <br>
          <button @click="onBlock">点击登录</button >
      <button @click="toRegi()">注册</button>
        </div>
    
     
     
    
    </div>
    <van-cell
      title="我的订单"
      style="font-size: 20px"
      is-link
      @click="Onorder"
    />
    <!-- 收发模块 -->
    <div class="menu">
      <van-row type="flex" justify="space-around" @click="onMenu">
        <van-col span="3"
          ><van-icon
            name="clock-o"
            color="#6e6e6e"
          
            size="40"
          /><br />代付款</van-col
        >
        <van-col span="3"
          ><van-icon
            name="cart-circle-o"
            color="#6e6e6e"
            size="40"
          
          /><br />待发货</van-col
        >
        <van-col span="3"
          ><van-icon
            name="logistics"
            color="#6e6e6e"
            size="40"
            badge="7"
          /><br />代收货</van-col
        >
        <van-col span="3"
          ><van-icon
            name="records"
            color="#6e6e6e"
            size="40"
            badge="5"
          /><br />待评价</van-col
        >
        <van-col span="3"
          ><van-icon
            name="gold-coin-o"
            color="#6e6e6e"
            size="40"
          /><br />售后服务</van-col
        >
      </van-row>
    </div>
    <!-- 常用功能 -->
    <div class="service">
      <div class="service-top">
        <van-cell title="常用功能" style="font-size: 20px" />
      </div>
      <van-row type="flex" class="box">
        <van-col span="6"
          ><van-icon name="bookmark-o" color="#6e6e6e" size="35" /><br />
          优惠券</van-col
        >
        <van-col span="6"
          ><van-icon name="like-o" color="#6e6e6e" size="35" dot /><br />
          我的收藏</van-col
        >
        <van-col span="6"
          ><van-icon name="points" color="#6e6e6e" size="35" dot/><br />
          积分中心</van-col
        >
        <van-col span="6"
          ><van-icon name="shield-o" color="#6e6e6e" size="35" /><br />
          账号安全</van-col
        >
        <van-col span="6"
          ><van-icon name="service-o" color="#6e6e6e" size="35" /><br />
          在线客服</van-col
        >
        <van-col span="6"
          ><van-icon name="question-o" color="#6e6e6e" size="35" dot/><br />
          帮助中心</van-col
        >
        <van-col span="6"
          ><van-icon name="records" color="#6e6e6e" size="35" dot/><br />
          意见反馈</van-col
        >
        <van-col span="6"></van-col>
      </van-row>
    </div>
     <div class="service-top service-right"><van-cell title="为你推荐" style="font-size: 20px;" />
      <div class="recommend">
      <ul>
        <li v-for="item in productlist" :key="item.id" @click="Onretor(item.id)">
          <img :src="item.picture" alt />
         <p>{{item.product}}</p>
          <span>￥{{item.price}}</span>
        </li>
      </ul>
    </div>
     </div>
     <div>
      
     </div>
 <!-- <menus /> -->
  </div>
</template>

<script >

import {requestProductList} from "@/api/home"

export default {
  data() {
    return {
      user: {},
      token: [],
      productlist:{},
    };
  },
  methods: {
    onBlock() {
      this.token = this.$store.getters.token;
      console.log(this.token);
      if (this.token) {
        this.$dialog.alert({
          message: "已经登录咯",
        });
      } else {
        this.$router.push({ path: "/login" });
      }
    },
  toRegi:function(){
    this.$router.push('/register')
  },
    onSubmit(values) {
      console.log("submit", values);
    },
    onsetup() {
      this.$router.push({ path: "/setup" });
    },
    Onorder() {
      this.$router.push({ path: "/order" });
    },
    onMenu() {
      this.$router.push({ path: "/order" });
    },
      Onretor(id){
 this.$router.push({path:`detail/${id}`})
    }
  },
  async created() {
    this.user = this.$store.getters.user;
   let res = await requestProductList();
    let data = res.data;
    let { resultCode, resultInfo } = data;
    if (resultCode == 1) {
      this.productlist = resultInfo.list;
     
    }
  

  },
};
</script>


<style scoped lang="scss">
.top{
  width: 100%;
  height: 150px;
  padding: 20px 16px 0 16px;
  color: white;
  line-height: 50px;
  span{
    float: left;
    margin-right: 20px;
    &:nth-child(2){
      font-size: 22px;
      font-weight: 600;
    }
    &:last-child{
      float: right;
    }
  }
  img{
    border-radius: 100%;
    width: 50px;
    height: 50px;
  }
button{
  padding: 0 12px;
 height: 40px;
 line-height: 40px;
 border-radius: 6px;
 border: none;
  color: white;
  text-align: center;
  float: right;
  margin-right: 10px;
  margin-top: 10px;
  background-color: #fa826c;
}
}


.my-main {
  background-color: #f2f2f2 !important ;
  height: 1200px;
  text-align: center;
}
.my-nav {
  background-color: #ff0000;
  margin-bottom: 10px;
 
}
.van-row {
  line-height: 50px;
}
.hedding {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-left: 20px;
  margin-top: 10px;
}
.hedding img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.van-cell__title span {
  float: left;
}
.menu {
  border-top: 2px solid #f2f2f2;
  background-color: #ffffff;
}
.menu .van-col {
  width: 20%;
}
.service-top {
  border-bottom: 8px;
}
.menu .van-row {
  margin-top: 17px;
  line-height: 30px;
  padding-bottom: 17px;
}
.service {
  margin-top: 8px;

  background-color: #fff;
}
.service .box .van-col {
  width: 25%;
  line-height: 30px;
  border-bottom: 1px;
  border-top: 3px solid #f2f2f2;
  margin-bottom: 10px;
  padding-top: 14px;
}
.service .box .van-col .van-icon {
  margin-top: 10px solid #f2f2f2;
}
.service-right {
  margin-top: 10px;
}

.recommend{
  width: 100%;
  height: 200px;



   
}
.recommend ul{
  width:100%;
  height: 180px;
  padding-left: 10px;
   display: flex;
     flex-wrap: wrap;
    justify-content: space-evenly;
  

}
.recommend ul li{
  width: 47%;
margin-top: 11px;
  text-align: center;
   justify-content: space-evenly;
     flex-wrap: wrap;
     margin-right: 10px;
     height: 300px;
     background-color: #fff;
       padding: 12px;
}
.recommend ul li img{
  width: 100%;
  height: 190px;
  text-align: center;

}
.recommend ul li p{
  float: left;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-top: 3px;
  height: 33px;
  line-height: 17px;
}
.recommend ul li span{
 float: left;
 color: #ff0000;
 margin-top: 8px;
 margin-bottom: 10px;
 display: inline-block;
 font-size: 22px;
}
</style>
